<template>
<view>
  <view class="topNav">
    <uni-nav-bar left-icon="left" height="50px"  @clickLeft="back">
      <view class="input-view">
        <!--      <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />-->

        <uni-search-bar class="uni-mt-10" radius="100"
                        placeholder="关键字"
                        clearButton="auto"
                        cancelButton="none"
                        @confirm="confirm"
                        v-model="searchText"
        />
      </view>
      <block slot="right">
      </block>
    </uni-nav-bar>

    <sl-filter :independence="true" :menuList="menuList" @result="checkFilter"></sl-filter>

  </view>
  <mk-goods-list :goods="goods" @clickItem="goodsItem"></mk-goods-list>
  <uni-load-more :status="status" />
</view>
</template>

<script>
import SlFilter from "../../../../components/songlazy-sl-filter/sl-filter/sl-filter";
import {mainService} from "../../../../api/buyer/main";
import {attachmentService} from "../../../../api/buyer/public/attachmentService";
import {BASE_IMG_URL} from "../../../../api/service";
export default {
  name: "index",
  components: {SlFilter},
  data(){
    return{
      searchText:"",
      menuList: [
        {
          'title': '销量',
          'isMutiple': false,
          'isSort': true,
          'key': 'saleNum',
          'detailList': [
            {
              'title': '不限',
              'value': ''
            },
            {
              'title': '销量升序',
              'value': 'ASC'
            },
            {
              'title': '销量降序',
              'value': 'DESC'
            }
          ]
        },
        {
          'title': '价格',
          'key': 'minPrice',
          'isSort': true,
          'isMutiple': false,
          'detailList': [
            {
              'title': '不限',
              'value': ''
            },
            {
              'title': '低价优先',
              'value': 'ASC'
            },
            {
              'title': '高价优先',
              'value': 'DESC'
            }
          ]
        },
        // {
        //   'title': '筛选',
        //   'detailTitle': '条件',
        //   'key': 'key_3',
        //   'isMutiple': false,
        //   'detailList': [
        //     {
        //       'title': '条件_3_1',
        //       'value': 'val_3_1'
        //     },
        //     {
        //       'title': '条件_3_2',
        //       'value': 'val_3_2'
        //     },
        //     {
        //       'title': '条件_3_3',
        //       'value': 'val_3_3'
        //     }
        //   ]
        // }
      ],
      queryParams:{
        currentPage:1,
        pageSize:5,
        filters:{

        },
        orderBys:[],
      },
      status:"more",
      goods:[],
    }
  },
  async onReachBottom() {
    // console.log("onReachBottom");
    if(this.status!="no-more"){
      this.queryParams.currentPage+=1;
      this.status="loading";
      this.init("loadMore")
    }
  },
  methods:{
    init(type){
      if(type=='load') {
        this.goods=[];
        this.queryParams.currentPage=1;
      }
      mainService.findCommoditys(this.queryParams).then((res)=> {
        let resData = res.data.datas;
        if (resData && resData.length != 0) {
          resData.forEach((res => {
            // console.log(res,BASE_URL,res.attachments.length!=0?res.attachments[0].attachmentAddr:"")
            let good = {};
            good.id = res.eid
            good.name = "Commodity"
            good.img = ""
            good.title = res.description
            good.littleTitle = res.shopName
            good.amount = "￥"+res.minPrice
            good.amountRemark = res.saleNum+"已购买"
            // good.lable = "包邮"
            good.commodity = res
            this.goods.push(good)
          }))
          this.loadImage()
        }
        // console.log(this.goods)
        if(resData.length<this.queryParams.pageSize){
          this.status="no-more"
        }else {
          this.status="more"
        }
      })
    },

    loadImage(){
      //懒加载图片
      this.goods.forEach(good => {
        if (!good.img||good.img==="") {
          if (good.id && good.name) {
            attachmentService.findFile(good.id, good.name).then((res) => {
              good.img = BASE_IMG_URL + res.data[0].attachmentAddr
            })
          }
        }
      })
    },
    goodsItem(item){
      console.log(item)
      uni.navigateTo({
        url: '/pages/buyer/main/goodDetailed?good=' + encodeURIComponent(JSON.stringify(item.commodity)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    confirm(){
      this.queryParams.currentPage=1
      this.queryParams.filters.description=this.searchText?"*"+this.searchText+"*":undefined;
      this.init("load")
    },
    back(){
      uni.navigateBack({
        delta:1,//返回层数，2则上上页
      })
    },
    checkFilter(item){
      console.log(item)
      let key=Object.keys(item)[0];
      let value=item[key];
      let isUpdate=false;
      this.queryParams.orderBys.forEach(orderBy=>{
        if(orderBy.property==key){
          orderBy.order=value
          isUpdate=true;
        }
      })
      if(!isUpdate){
        this.queryParams.orderBys.push({
          property:key,
          order:value
        })
      }
      console.log(this.queryParams)
      this.init("load")
    }

  },
  onLoad(option) {
    if (option.search) {
      const s = decodeURIComponent(option.search);
      this.searchText = JSON.parse(s);
      this.queryParams.filters.description=this.searchText?"*"+this.searchText+"*":undefined;
      this.init("load");
    }
  },


}
</script>

<style scoped>
.topNav{
  margin-top: 80rpx;
}
.input-view{
  /*padding: 20rpx;*/
}
</style>